<template>
  <el-dialog
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    width="650px"
    :close-on-click-modal="false"
    :before-close="closeDialog"
  >
    <el-form ref="ruleForm" :model="form" :rules="rules" label-width="80px">
      <el-form-item prop="name" label="部门名称">
        <el-input
          placeholder="请输入部门名称"
          maxlength="12"
          v-model="form.name"
        ></el-input>
      </el-form-item>
      <el-form-item prop="unitId" label="单位名称">
        <el-select
          v-model="form.unitId"
          size="medium"
          placeholder="请选择所属单位"
        >
          <el-option
            v-for="(item, index) in unitOpts"
            :key="index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="remark" label="备注">
        <el-input
          placeholder="请输入部门备注"
          maxlength="12"
          v-model="form.remark"
        ></el-input>
      </el-form-item>

      <div class="dialog-btns">
        <el-button @click="closeDialog" size="medium">取消</el-button>
        <el-button @click="editHandle" type="primary" size="medium">{{
          form.id ? "编辑" : "新增"
        }}</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>
  
<script>
import {
  addDepartment,
  updateDepartment,
} from "@/api/organization/departments";
import { unitList } from "@/api/organization/units";
export default {
  name: "DepartmentEdit",
  props: {
    formData: {
      type: Object,
    },
    unitOpts: {
      type: Array,
    },
    title: {
      type: String,
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {
        name: "",
        unitName: "",
        unitId: "",
        remark: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入部门名称",
            trigger: "blur",
          },
        ],
        unitId: [
          {
            required: true,
            message: "请选择单位名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.form = JSON.parse(JSON.stringify(this.formData));
    if (!this.form.name) {
      this.resetForm();
    }
  },
  methods: {
    editHandle() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (!this.form.id) {
            addDepartment(this.form).then((res) => {
              this.closeDialog("refresh");
            });
          } else {
            updateDepartment(this.form).then((res) => {
              this.closeDialog("refresh");
            });
          }
        }
      });
    },
    closeDialog(type) {
      this.$forceUpdate();
      if (type === "refresh") {
        setTimeout(() => {
          this.resetForm();
          this.$refs.ruleForm.resetFields();
          this.$emit("closeDialog", "unitVisible", type === "refresh");
        }, 1000);
      } else {
        this.resetForm();
        this.$refs.ruleForm.resetFields();
        this.$emit("closeDialog", "unitVisible", type === "refresh");
      }
    },
    resetForm() {
      this.form = {
        name: "",
        unitName: "",
        unitId: "",
        remark: "",
      };
    },
  },
  computed: {
    dialogTitle() {
      return (this.form.id ? "编辑" : "新增") + this.title;
    },
  },
};
</script>

<style>
.dialog-btns {
  text-align: center;
}
.el-select {
  width: 100%;
}
</style>